<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }" layout="horizontal">
        <a-form-item label="登录账号" :rules="rules.username" name="username">
            <a-input v-model:value="form.username" placeholder="请输入登录账号" disabled />
        </a-form-item>
        <a-form-item label="姓名" :rules="rules.realname" name="realname">
            <a-input v-model:value="form.realname" placeholder="请输入姓名" />
        </a-form-item>
        <a-form-item label="手机号" :rules="rules.phone" name="phone">
            <a-input v-model:value="form.phone" placeholder="请输入手机号" />
        </a-form-item>
        <a-form-item label="工号" :rules="rules.workNo" name="workNo">
            <a-input v-model:value="form.workNo" placeholder="请输入工号" />
        </a-form-item>
        <a-form-item label="性别" :rules="rules.sex" name="sex">
            <dict-radio v-model:value="form.sex" dict-code="sex" />
        </a-form-item>
        <a-form-item label="邮箱" :rules="rules.email" name="email">
            <a-input v-model:value="form.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item label="出生日期" :rules="rules.birthday" name="birthday">
            <date-picker v-model:value="form.birthday" date-format="YYYY-MM-DD" placeholder="请选择出生日期" />
        </a-form-item>
    </a-form>
    <div class="btn-container">
        <a-button type="primary" @click="onSave">保存</a-button>
        <a-button type="primary" danger @click="onClose">关闭</a-button>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { DictRadio, DatePicker, notice } from '@iframe/tools/components/index'
import { EmailRegular, TelphoneRegular } from '@iframe/tools/utils/regular'
import { clone } from '@iframe/tools/utils/Tools'
import { updateCurrentUser } from '/@/api/System/User'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios'

const formRef = ref()
let form = reactive({})
const emits = defineEmits(['close'])
const rules = reactive({
    realname: { required: true, message: '请输入姓名' },
    phone: [
        { required: true, message: '请输入手机号' },
        { pattern: TelphoneRegular, message: '请正确输入手机号' }
    ],
    workNo: { required: true, message: '请输入工号' },
    email: { pattern: EmailRegular, message: '邮件格式不正确' },
    sex: { required: true, message: '请选择性别' }
})

const onSave = () => {
    formRef.value
        .validate()
        .then(params => {
            updateCurrentUser(params).then(result => {
                if (result.code === SUCCESS_CODE) {
                    notice.success('修改成功')
                }
            })
        })
        .catch(err => {
            console.warn(err)
        })
}

const setForm = pForm => {
    clone(form, pForm)
}
const onClose = () => {
    emits('close')
}
defineExpose({ setForm })
</script>
<style lang="less" scoped>
.btn-container {
    padding-left: 200px;
    :deep(.ant-btn) {
        margin: 5px;
    }
}
</style>
